<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>考研英语</title>
  <script src="https://unpkg.com/vue@next"></script>
  <link rel="stylesheet" href="https://unpkg.com/element-plus/dist/index.css" />
  <script src="https://unpkg.com/element-plus"></script>
  <style>
    #app {
      margin: auto;
    }
    .tiku, .dati {
      height: 500px;
      width: 100%;
      background-color: #eaf1f1;
    }
    .add-tiku {
      height: 50px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      border: 1px #fff solid;
    }
    .tiku-list {
      height: 450px;
      width: calc(100% - 20px);
      overflow: auto;
      padding: 10px;
    }
    .tiku-item {
      height: 50px;
      width: 100%;
      background-color: #fff;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .tiku-delete {
      width: 60px;
      font-size: 14px;
      color: red;
      cursor: pointer;
    }
    .tiku-name {
      height: 30px;
      font-size: 20px;
      line-height: 30px;
      padding-left: 10px;
    }
    .tiku-time {
      height: 15px;
      font-size: 12px;
      line-height: 15px;
      padding-left: 20px;
    }
    .add-tiku .el-button {
      margin-right: 20px;
    }
    .add-from {
      height: 300px;
      width: 100%;
    }
    .check-box .check {
      height: 60px;
      width: 100%;
      margin-bottom: 15px;
      font-size: 20px;
      line-height: 30px;
      background-color: #eaf1f1;
      padding-left: 10px;
    }
    .select {
      height: 50px;
      width: 100%;
      border-bottom:1px #fff solid ;
      display: flex;
      align-items: center;
      padding-left: 10px;
    }
    .dati-box{
      height: 450px;
      width: 100%;
      display: flex;
    }
    .dati-left {
      margin-left: 20px;
      width: 65%;
      height: 450px;
      overflow: auto;

    }
    .dati-right {
      width: 35%;
      height: calc(450px - 20px);
      padding: 10px;
      border-left: 1px #fff solid;
    }
    .dafen-box {
      height: calc(100% - 40px);
      width: 100%;
      overflow: auto;
      font-size: 14px;
    }
  </style>
</head>
<body>
  <div id="app">
    <el-tabs type="border-card">
      <el-tab-pane label="我的题库">
        <div class="tiku">
          <div class="add-tiku"><el-button @click="dialogVisible=true">新增题库+</el-button></div>
          <div v-if="tikuList.length === 0" style="text-align: center; margin-top: 30px;">暂无试题</div>
          <div class="tiku-list" else>
            <div class="tiku-item" v-for="(item, index) in tikuList" :key="index">
              <div class="tiku-left">
                <div class="tiku-name"><span style="background-color: skyblue;">试卷{{tikuList.length-index}}.</span>{{item.name}}</div>
                <div class="tiku-time">{{item.time}}</div>
              </div>
              <div class="tiku-delete" @click="deleteHandle(index)">
                删除
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="开始答题">
        <div class="dati">
          <div class="select">
            <div><span style="color: red;">*</span>请先选择试卷再开始答题：</div>
            <div>
              <el-select v-model="thisTiku" placeholder="请选择试卷">
                <el-option v-for="(item, index) in tikuList" :key="index" :value="index" :label="item.name"></el-option>
              </el-select>
            </div>
          </div>
          <div class="dati-box">
            <div class="dati-left">
              <div>一、完形填空</div>
              <el-form
                :model="ti1Form"
              >
                <el-form-item v-for="index in 20" :key="index" :label="index">
                  <el-radio-group v-model="ti1Form[index-1]">
                    <el-radio label="A">A</el-radio>
                    <el-radio label="B">B</el-radio>
                    <el-radio label="C">C</el-radio>
                    <el-radio label="D">D</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
              <div>二、阅读理解</div>
              <el-form
                :model="ti2Form"
              >
                <el-form-item v-for="index in 20" :key="index" :label="20+index">
                  <el-radio-group v-model="ti2Form[index-1]">
                    <el-radio label="A">A</el-radio>
                    <el-radio label="B">B</el-radio>
                    <el-radio label="C">C</el-radio>
                    <el-radio label="D">D</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
              <div>三、新题型</div>
              <el-form
                :model="ti3Form"
              >
                <el-form-item v-for="index in 5" :key="index" :label="40+index">
                  <el-radio-group v-model="ti3Form[index-1]">
                    <el-radio label="A">A</el-radio>
                    <el-radio label="B">B</el-radio>
                    <el-radio label="C">C</el-radio>
                    <el-radio label="D">D</el-radio>
                    <el-radio label="E">E</el-radio>
                    <el-radio label="F">F</el-radio>
                    <el-radio label="G">G</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-form>
            </div>
            <div class="dati-right">
              <div style="height: 40px;"><el-button @click="jiaojuanHandle">交 卷</el-button></div>
              <div v-if="dafendis" class="dafen-box">
                <div style="font-size: 16px;">你的最终得分是：<span style="color: red;font-size: 18px;">{{number}}</span>；打分过程生成：</div><br>
                <div>一、完形填空</div>
                <div v-for="(item,index) in ti1Form" :key="index">
                  {{index+1}}.{{item}} 
                  <span v-if="tikuList[thisTiku].ti1[index] === item" style="color: rgb(15, 241, 109);font-weight: 800;">√</span>
                  <span v-else style="color: red;font-weight: 800;">×&nbsp;&nbsp;answer：{{tikuList[thisTiku].ti1[index]}}</span>
                </div>
                <div>二、阅读理解</div>
                <div v-for="(item,index) in ti2Form" :key="index">
                  {{20+index+1}}.{{item}} 
                  <span v-if="tikuList[thisTiku].ti2[index] === item" style="color: rgb(15, 241, 109);font-weight: 800;">√</span>
                  <span v-else style="color: red;font-weight: 800;">×&nbsp;&nbsp;answer：{{tikuList[thisTiku].ti2[index]}}</span>
                </div>
                <div>三、新题型</div>
                <div v-for="(item,index) in ti3Form" :key="index">
                  {{40+index+1}}.{{item}} 
                  <span v-if="tikuList[thisTiku].ti3[index] === item" style="color: rgb(15, 241, 109);font-weight: 800;">√</span>
                  <span v-else style="color: red;font-weight: 800;">×&nbsp;&nbsp;answer：{{tikuList[thisTiku].ti3[index]}}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      v-model="dialogVisible"
      :title="addTitle"
      width="80%"
      :show-close="false"
    >
      <div v-if="tab === 1" class="add-from">
        <el-form
        label-position="top"
        :model="addForm"
      >
        <el-form-item label="题库名称：">
          <el-input v-model.trim="addForm.name" placeholder="请输入题库名称，例如：2022年试题"/>
        </el-form-item>
        <el-form-item label="1.完形填空：">
          <el-input v-model.trim="addForm.ti1"  placeholder="请输入完形填空答案，题号1-20，大写ABCD"/>
        </el-form-item>
        <el-form-item label="2.阅读理解：">
          <el-input v-model.trim="addForm.ti2"  placeholder="请输入阅读理解答案，题号21-40，大写ABCD"/>
        </el-form-item>
        <el-form-item label="3.新题型：">
          <el-input v-model.trim="addForm.ti3"  placeholder="请输入完新题型答案，题号：41-45，大写ABCDEFG"/>
        </el-form-item>
      </el-form>
      </div>
      <div v-else-if = "tab === 2" class="add-from check-box">
        <div class="check">
          <div>试卷名称:</div>
          <div>{{addForm.name}}</div>
        </div>
        <div class="check">
          <div>完形填空（1-20）：</div>
          <div>
            <span v-for="(item, index) in addForm.ti1" :key="index">
              {{item}}
              <span  v-if="(index+1)!==addForm.ti1.length && (index+1)%5 === 0">/</span>
            </span>
          </div>
        </div>
        <div class="check">
          <div>阅读理解（21-40）：</div>
          <div>
            <span v-for="(item, index) in addForm.ti2" :key="index">
              {{item}}
              <span v-if="(index+1)!==addForm.ti2.length && (index+1)%5 === 0">/</span>
            </span>
          </div>
        </div>
        <div class="check">
          <div>新题型（41-45）：</div>
          <div>
            <span v-for="(item, index) in addForm.ti3" :key="index">
              {{item}}
              <span v-if="(index+1)!==addForm.ti3.length && (index+1)%5 === 0">/</span>
            </span>
          </div>
        </div>
        <span style="font-size: 12px; color: red;">*检查答案无误后，点击确认存储答案</span>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="quxiaoHandle">{{quxiao}}</el-button>
          <el-button type="primary" @click="quedingHandle">
            {{queren}}
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>

  <script>
    const { createApp, reactive, toRefs, onMounted } = Vue;
    const vue3Composition = {
      setup(){
        onMounted(() => {
          data.tikuList = JSON.parse(localStorage.getItem('tikuList') || '[]')
        })
        const data = reactive({
          dialogVisible: false,
          tikuList: [],
          addForm: {},
          addTitle: "第一步：输入试卷答案",
          queren: "下一步",
          quxiao: "取消",
          tab: 1,
          thisTiku: null,
          ti1Form: [],
          ti2Form: [],
          ti3Form: [],
          dafendis: false,
          number: 0
        })
        const dataRef = toRefs(data);
        const quxiaoHandle = () => {
          if(data.tab === 1) {
            data.dialogVisible = false
          } else if (data.tab === 2) {
            data.tab = 1;
            data.queren = "下一步";
            data.quxiao = "取消";
            data.addTitle = "第一步：输入试卷答案";
          }
        }
        const quedingHandle = () => {
          if(data.tab === 1) {
            data.tab = 2;
            data.queren = "确定";
            data.quxiao = "上一步";
            data.addTitle = "第二步：检查试卷答案";
          } else if (data.tab === 2) {
            data.tab = 1;
            data.queren = "下一步";
            data.quxiao = "取消";
            data.addTitle = "第一步：输入试卷答案";
            if(!data.addForm.name||!data.addForm.ti1||!data.addForm.ti2||!data.addForm.ti3){
              return alert("试卷名称、答案都不能为空！你再瞅瞅哪个框没有填！")
            } else if (data.addForm.ti1 && data.addForm.ti1.length !== 20) {
              return alert("完形填空需要有20个！这都填错，回小学重造吧");
            }else if (data.addForm.ti2 && data.addForm.ti2.length !== 20) {
              return alert("阅读理解需要有20个！这都填错，回小学重造吧");
            }else if (data.addForm.ti3 && data.addForm.ti3.length !== 5) {
              return alert("不是，新题型只有5题，这都能填错？");
            }
            data.dialogVisible = false;
            data.addForm.time = new Date().toLocaleString();
            data.tikuList.unshift(data.addForm);
            localStorage.setItem('tikuList', JSON.stringify(data.tikuList));
            data.addForm = {};
            alert("添加成功！")
          }
        }
        const deleteHandle = (n) => {
          let r = confirm(`确认删除试题${data.tikuList[n].name}吗？删除后无法恢复！`);
          if(r) {
            data.tikuList.splice(n, 1);
            localStorage.setItem('tikuList', JSON.stringify(data.tikuList));
          }
        }
        const jiaojuanHandle = () => {
          let r = confirm(`检查好没，确定交卷？`);
          if(!r) return;
          if (data.thisTiku === null) {
            alert("我亲爱滴好锅锅，你不选一套答案，我拿什么跟你打分咧，用爱吗？请先选择试卷!");
            return;
          } 
          data.number = 0;
          data.dafendis = true;
          data.ti1Form.forEach((item, index) => {
            if(data.tikuList[data.thisTiku].ti1[index] === item) data.number = data.number + 0.5;
          });
          data.ti2Form.forEach((item, index) => {
            if(data.tikuList[data.thisTiku].ti2[index] === item) data.number = data.number + 2;
          });
          data.ti3Form.forEach((item, index) => {
            if(data.tikuList[data.thisTiku].ti3[index] === item) data.number = data.number + 2;
          });
        }
        return {
            ...dataRef,
            jiaojuanHandle,
            deleteHandle,
            quxiaoHandle,
            quedingHandle
        }
      }  
    }
    const app = createApp(vue3Composition).use(ElementPlus).mount('#app');
  </script>
</body>
</html>